<template>
  <div class="name">
    <font style='font-size:20px;color:gray;cursor:pointer;' @click="$router.push({path:'/me'})"><返回</font>
      <input type="text" maxlength="6" autocomplete="off" placeholder="1~6个字符" v-model="name" @input='surebtn'/>
      <div class="msg">注意:</div>
      <div class="msg">用户名只能由1到15个字符组成</div>
      <div class="msg">请勿包含姓名/身份证号/银行卡号等隐私信息</div>
      <div class="msg">只能由英文,汉字,数字组成,不能包含特殊字符与空格</div>
      <button class="sure" type="button" ref="btn" @click='sendname'>确认修改</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
export default {
  name: "name",
  data() {
    return {
      name: ""
    };
  },
  methods: {
    ...mapMutations(['setnickname']),
    surebtn() {
      if (this.name) {
        this.$refs.btn.style.background='rgb(0,166,255)'
        this.$refs.btn.style.color='white'
        this.$refs.btn.type='submit'
        
      }else{
         this.$refs.btn.style.background='rgb(211,211,211)'
        this.$refs.btn.type='button'
        this.$refs.btn.style.color='gray'
      }
    },
    sendname(){
      if(this.$refs.btn.type=='submit'){
          this.axios.post('http://127.0.0.1:3000/changename',{phone:this.$store.state.phone,name:this.name})
          .then((res)=>{
            this.$store.commit('setnickname',res.data.msg)
            this.$router.push({path:'/me'})
          })
          .catch((err)=>{
            console.log(err)
          })
      }
    }
  }
};
</script>

<style scoped>
.sure {
  width: 100%;
  height: 58px;
  outline: none;
  border: none;
  border-radius: 5px;
  margin-top: 20px;
  font-size: 20px;
  color: gray;
}
.msg {
  padding: 12px 0 0 0;
  font-size: 12px;
  color: gray;
}
.name {
  width: 85%;
  margin: 20px auto;
}
input {
  outline: none;
  background: none;
  border: none;
  border-bottom: 1px solid gainsboro;
  width: 100%;
  height: 45px;
  font-size: 20px;
}
</style>